<template>
	<view class="i-category">
		<!-- 4dc3d8 -->
		<view class="c-item" :key="key" v-for="(item, key) in menuData" v-on:click="jumpToFrom(item)">
			<view v-show="item.data.msgCount>0" class="message-count">{{item.data.msgCount}}</view>
			<view :style="{'backgroundColor':`#${item.data.remark}70`,'box-shadow':`0 0 0px 5px #${item.data.remark}30`}" class="ic-item">
				<view class="iconfont ic-item-in" :style="{'color':`#${item.data.remark}`}" :class="item.data.icon"></view>
			</view>
			<view class="eu-text"><text>{{item.data.menuName}}</text></view>
		</view>
	</view>
</template>

<script>
	import authMenuApi from '@/pages/api/authMenuApi.js'
	export default {
		name: 'MyFormButton',
		props: {
			menuData: {
				type: Array
			}
		},
		data() {
			return {

			}
		},
		methods: {
			/*
			 * 跳转到应用页面
			 * @param {Object} item
			 */
			jumpToFrom: function(item) {
				console.log("点击的菜单是：", item);
				this.$emit("jump",item)
				//#ifdef MP-WEIXIN
				this.requestMessage()
				//#endif

			}

		},
		created() {}
	}
</script>

<style lang="scss" scoped>
	.i-category {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 15rpx;
		margin-top: 1rpx;
		
		background: white;
		padding-left: 26rpx;
		padding-top: 22rpx;
		padding-right: 26rpx;
	}

	.c-item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 25%;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		height: auto;
	}

	.eu-text {
		width: 100%;
		font-size: 24rpx;
		text-align: center;
		color: #1e1e1e;
		overflow: hidden;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 0.5rem;
		display: block;
		font-family: sans-serif;
	}

	.ic-item {
		display: flex;
		width: 3rem;
		height: 3rem;
		align-items: center;
		text-align: center;
		border-radius: 50px;
		color: white;
	}

	.ic-item-in {
		// align-self: center;
		font-size: 1.8rem;
		// display: block;
		// margin: 0 auto;
		// align-self: center;
		// margin-top: 0.6rem;
		margin-left: auto;
		margin-right: auto;
		
		// transform: matrix(-50%);
	}
	
	.message-count {
		position: absolute;
		text-align: center;
		min-width: 1rem;
		height: 1rem;
		line-height: 1rem;
		background-color: #fc0016;
		color: #fff;
		z-index: 1;
		font-size: 0.6rem;
		border-radius: 50%;
		top: 0.2rem;
		left: 66%;
	}
</style>
